<script setup>
import dayjs from "dayjs";
import 'dayjs/locale/zh-cn'
import { projectName } from '@/pages/dataManagement/common'

// 设置 dayjs 的语言
dayjs.locale('zh-cn');



const props = defineProps({
  currentIndex: {
    type: [Number, String],
    default: 0
  },
})

const emit = defineEmits(["tapTopFn"])
const tapTop = () => emit('tapTopFn')

// 时间处理
const now = ref(null);
const time = ref(null)
const week = ref(null)
const nowTime = ref(null);
const sTime = ref(null);
nowTime.value = setInterval(() => {
  now.value = dayjs().format("YYYY年MM月DD日");
  time.value = dayjs().format("HH:mm");
  week.value = dayjs().format("dddd");
  sTime.value = dayjs().format("HH:mm:s");
  if (sTime.value == '23:59:0') {
    location.reload();
  }
}, 1000);


onBeforeUnmount(() => {
  if (nowTime.value) {
    clearInterval(nowTime.value);
    clearInterval(nowTime.value);
    nowTime.value = null;
  }
});

const appStore = useAppStore()


</script>

<template>
  <div class="h-[13%] flex absolute left-0 top-0 right-0 items-center justify-center gap-[38px] z-10"
    style="background-color: #f3f7f7;border-radius: 46px 46px 0 0;">
    <div class="w-[31.3%] ">
      <div class="flex items-center pl-[25px]">
        <img class="w-[130px]" src="../../assets/logo.png" alt="">
      </div>
    </div>
    <div class="w-[34.3%] ">
      <div v-if="currentIndex == 0" class="text-[40px] min_color  flex items-center" style="font-weight: 600;">
        {{ appStore.appInfo.createTime || '油液在线监测系统' }}
      </div>

      <div v-else class="text-[40px] min_color  flex items-center" style="font-weight: 600;">
        {{ projectName }}


        <n-tooltip trigger="hover" placement="right">
          <template #trigger>
            <svg @click="tapTop" t="1721183948443"
              class="icon ml-[28px] cursor-pointer  xwmd:(w-[40px] h-[40px]) xwlg:(w-[40px] h-[40px]) "
              viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4239" width="40" height="40">
              <path
                d="M54.4 348.8l428.8 416c9.6 6.4 19.2 9.6 28.8 9.6 9.6 0 22.4-3.2 28.8-9.6l428.8-416c16-12.8 16-35.2 0-48s-41.6-12.8-54.4 0L512 688 108.8 300.8c-12.8-16-38.4-16-54.4 0-16 12.8-16 35.2 0 48z"
                fill="#00440E" p-id="4240"></path>
            </svg>
          </template>
          <div class="text-white">
            返回
          </div>
        </n-tooltip>




      </div>

    </div>
    <div class="w-[30.9%]">
      <div class="flex items-center">
        <div>
          <span class="time">{{ time }}</span>
          <span class="day mx-[9px]">{{ now }}</span>
          <span class="week">{{ week }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.time {
  font-family: Poppins, Poppins;
  font-weight: 600;
  font-size: 45px;
  color: #00440E;
  line-height: 53px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.day {

  font-family: Poppins, Poppins;
  font-weight: 600;
  font-size: 24px;
  color: #00440E;
  line-height: 28px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.week {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  font-size: 24px;
  color: #00440E;
  line-height: 28px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
</style>
